import { Icon } from '@/components/Icon';
import type { RouteMeta } from 'vue-router';

export const useRenderMenuTitle = () => {
  const renderMenuTitle = (meta: RouteMeta) => {
    const { title = 'empty title', icon } = meta;

    const renderTitle = () => <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">{title}</span>;
    return icon ? (
      <>
        <Icon icon={icon as string} />
        {renderTitle()}
      </>
    ) : (
      <>{renderTitle()}</>
    );
  };

  return {
    renderMenuTitle
  };
};
